<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				width: 500px;
				height: 10000px;/*滚动条*/
				/* 背景尺寸 ：函数 contain cover */
				background-size: cover ;  /*等比例宽高【缩放】  保证整个页面图片全部显示*/
				background-image: url(img/猫和老鼠.jpg);
				/* 背景图控制属性  滚动scroll 固定fixed*/
				background-attachment: fixed;
			}
			div{
				width: 500px;
				height: 500px;
				/* 等同于border的功能：确定选择器是否选中、布局 */
				back ground-color: #e4393c;
				background-image: url(img/猫和老鼠.jpg);
				/* 背景图小于空间【自动平铺】 去掉平铺*/
				background-repeat: no-repeat;
				backgr ound-repeat: repeat-x;
				backgr ound-repeat: repeat-y;
				/* 背景尺寸  属性值 ：数值/百分比
                                    函数 cover	等比例宽高【放大】图片覆盖整个容器
									contain   等比例宽高【缩放】  保证整个页面图片全部显示
				*/
			    border: 1px solid red;
				background-size: 50%;
				/* 背景定位：先决条件，背景图小于外围空间 */
				background-position: 80% 0;/*任意位置：数值px +数值%*/
				
				/*符合属性:全部子属性顺序*/
				/* background: background-image: ; background-color: ;  background-position: ;
				background-size: ; background-repeat: ;和background-attachment: ;
				*/
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed at dolor aliquid eaque repellendus, velit eveniet obcaecati, eligendi numquam beatae architecto. Iure alias aperiam magni vitae in doloremque, repudiandae distinctio!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi commodi maxime dolorem amet animi, reprehenderit corporis suscipit alias nisi odit rem, nam iusto esse recusandae eos modi consectetur. Culpa, dolor!
		<!-- css背景：背景图、背景颜色   ----区别：页面任意移动位置
		    html图片：img               ----区别：页面定死位置
			子属性
			background-color背景颜色：十六进制
			复合属性----省去子属性
			background：十六进制
		 -->
		 <div></div>
	</body>
</html>